<template>
  <div style="padding: 10px 10px;min-height: 87.5vh">
    <p>订单号: {{ orderSn }}</p>
    <p>退款金额：<span class="actrual-price">{{ unitPrice(order.actualPrice, '￥', '') }} </span></p>
    <a-card title="退款商品">
      <a-table :loading="loading" border :columns="columns" :data-source="order?.goodsList" ref="table"
               :pagination="false">
        <template #bodyCell="{ record,column, text }">
          <template v-if="column.dataIndex === 'goodsName'">
            <a-image
                :src="getFileAccessHttpUrl(record.goodsImage)"
                :width="100"
                v-if="record.goodsImage"
            />
            {{ record.goodsName }}
          </template>
        </template>
      </a-table>
    </a-card>

    <div style="margin-top: 20px">
      <a-form ref="formRef" :model="form" :label-col="labelCol" :wrapperCol="wrapperCol"
              :rules="validatorRules">
        <a-form-item label="退款原因" name="refundReason">
          <JDictSelectTag v-model:value="form.refundReason" dict-code="refund_reason"/>
        </a-form-item>
        <a-form-item label="退款说明">
          <a-textarea :rows="4" :maxlength="500" show-word-limit v-model:value="form.remark"/>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 12 }" style="margin-top: 30px">
          <a-button type="primary" @click="apply" :loading="loading">提交申请</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import JDictSelectTag from "@/components/public/JDictSelectTag.vue";
import {onMounted, reactive, ref} from "vue";
import {orderDetail} from "@/api/order";
import {saveRefundApply} from "@/api/refund";
import {useRoute, useRouter} from "vue-router";
import {getFileAccessHttpUrl} from "@/utils/compUtils";
import {unitPrice} from "@/utils";
import {useMessage} from "@/hooks/web/useMessage";

const formRef = ref();
const loading = ref<boolean>(false)
const {createMessage} = useMessage();

const router = useRouter();
const route = useRoute();
const orderSn: any = route.params?.orderSn

const labelCol = reactive({
  xs: {span: 24},
  sm: {span: 5}
});
const wrapperCol = reactive({
  xs: {span: 24},
  sm: {span: 17}
});
const order = ref<any>({})
const columns = reactive<any>([
  {
    title: "商品",
    key: "goodsName",
    dataIndex: "goodsName",
  },
  {
    title: "价格",
    key: "purchasePrice",
    dataIndex: "purchasePrice",
  },

  {
    title: "数量",
    key: "number",
    dataIndex: "number",
  },
  {
    title: "小计",
    key: "subTotal",
    dataIndex: "subTotal",
  },
])
const info = ref({}) // 售后信息
const form = reactive({ // 售后数据
  orderSn: "",
  refundAmount: '',
  refundReason: "",
  remark: ""
})
const validatorRules = reactive({ // 验证规则
  refundReason: [{required: true, message: '请选择退款原因'}],
})

async function getInfo() { // 获取售后信息
  loading.value = true;
  const res: any = await orderDetail(orderSn)
  order.value = res.result;
  loading.value = false;
}

async function apply() { // 申请提交
  await formRef.value.validate();
  loading.value = true
  try {
    form.orderSn = orderSn
    form.refundAmount = order.value.actualPrice
    await saveRefundApply(form)
    createMessage.success('退款申请提交成功，请等待管理员处理！')
    router.push("/userCenter/myOrder")
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getInfo()
})

</script>
<style lang="scss" scoped>
@import "@/assets/style/course/global.scss";

.actrual-price {
  color: $theme_color;
  font-weight: bold;
  font-size: 20px;
}
</style>
